<template>
  <div class="security-container">
    <div class="flex secur-item">
      <div class="flex item-left">
        <img class="item-icon" src="@/assets/iconPwd.png" />
        <div class="info">
          <div class="title">账户密码</div>
          <div class="tip">
            当前密码强度：
            <el-tag v-if="checkPwdStrength === 0 || checkPwdStrength === 1" type="danger"> 弱 </el-tag>
            <el-tag v-if="checkPwdStrength === 2" type="warning">中</el-tag>
            <el-tag v-if="checkPwdStrength === 3" type="success">强</el-tag>
            <el-tag v-if="checkPwdStrength === 4" type="success">超强</el-tag>
          </div>
        </div>
      </div>
      <el-button type="text" @click="handleChangePwd">修改</el-button>
    </div>

    <div class="flex secur-item">
      <div class="flex item-left">
        <img class="item-icon" src="@/assets/iconPhone.png" />
        <div class="info">
          <div class="title">密保手机</div>
          <span v-if="userInfo.phone" class="tip">已绑定手机：{{ hideCharacter(userInfo.phone, 'phone') }}</span>
          <span v-else class="tip">当前尚未绑定手机号</span>
        </div>
      </div>
      <el-button type="text" @click="handleChangePhone">修改</el-button>
    </div>

    <div class="flex secur-item">
      <div class="flex item-left">
        <img class="item-icon" src="@/assets/iconMail.png" />
        <div class="info">
          <div class="title">密保邮箱</div>
          <span v-if="userInfo.email" class="tip">已绑定邮箱：{{ hideCharacter(userInfo.email, 'email') }}</span>
          <span v-else class="tip">当前尚未设置密保邮箱</span>
        </div>
      </div>
      <el-button v-if="userInfo.email" type="text" @click="unbindEmail">解绑</el-button>
      <el-button v-else type="text" @click="handleChangeMail">绑定</el-button>
    </div>

    <pwd ref="pwd" />
    <phone ref="phone" />
    <email ref="email" />
    <unbindEmail ref="unbindEmail" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { checkPwdStrength, hideCharacter } from '@/utils'

import Pwd from './pwd'
import phone from './phone'
import email from './email'
import unbindEmail from './unbindEmail'

export default {
  components: {
    Pwd,
    phone,
    email,
    unbindEmail
  },
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['userInfo']),
    checkPwdStrength() {
      return checkPwdStrength(this.userInfo.pwd || 'a12345678')
    },
    hideCharacter() {
      return (value, type) => {
        return hideCharacter(value, type)
      }
    }
  },
  methods: {
    // 修改密码
    handleChangePwd() {
      const pwdDialog = this.$refs.pwd
      pwdDialog.dialog.visible = true
      pwdDialog.dialog.title = '修改密码'
    },
    // 修改手机
    handleChangePhone() {
      const phoneDialog = this.$refs.phone
      phoneDialog.dialog.visible = true
      if (this.userInfo.phone) {
        phoneDialog.dialog.step = 'step-unbind'
      }
      phoneDialog.dialog.title = '绑定手机'
    },
    // 修改邮箱
    handleChangeMail() {
      const emailDialog = this.$refs.email
      emailDialog.dialog.visible = true
      emailDialog.dialog.title = '绑定邮箱'
    },
    // 解绑邮箱
    unbindEmail() {
      const unbindEmailDialog = this.$refs.unbindEmail
      unbindEmailDialog.dialog.visible = true
      unbindEmailDialog.dialog.title = '解绑邮箱'
    }
  }
}
</script>

<style lang="scss" scoped>
.security-container {
  padding: 28px 0 0;
  .secur-item {
    margin-bottom: 45px;
    .item-icon {
      border-radius: 50%;
      width: 44px;
      height: 44px;
    }
    .info {
      font-family: Microsoft YaHei;
      margin-left: 14px;
      .title {
        font-size: 17px;
        font-weight: 400;
        color: #333;
        margin-bottom: 7px;
      }
      .tip {
        font-size: 15px;
        font-weight: 400;
        color: #999;
      }
    }
  }
}
</style>
